import { domTree } from '../../setMenu/setMenu.js';

import { endsTimeAnimation } from '../../../../../global/global.js';

let selectedTypeArr = {
  data: [],
};

function selectTypeAnima(event) {
  let el = event.target != undefined ? event.target : event;
  // console.log(el);

  //溯源 指定的 div.hunt 元素
  function getClass_bunt() {
    // console.log(el.classList.contains("bunt"));
    if (el.classList.contains('bunt') == false) {
      el = el.parentNode;
      getClass_bunt();
    }
  }
  getClass_bunt();

  // console.dir(el);
  //点击元素 的 文本值
  let targetElPInnerHTML = el.firstChild.innerHTML;

  //点击元素的 Value Attribute
  let targetClass_buntValue = el.getAttribute('value');

  //查驗是否爲新元素 返回已添加的元素
  if (selectedTypeArr.data.indexOf(targetClass_buntValue) > -1) {
    return selectedTypeArr[targetClass_buntValue];
  }

  //記錄新元素 1 / 2
  selectedTypeArr.data.push(targetClass_buntValue);

  let appendEl = document.getElementById('selected_area');
  // let appendElInnerHTML = appendEl.innerHTML

  // //置空 元素 添加到头部	-- 1 / 3
  // appendEl.innerHTML = ""

  let domData = {
    queue: ['a'],
    a: {
      tag: 'div', //-- tag 標簽屬性類型 可以進行自定義
      queue: ['a_a'], //-- data 屬性一般順序 filter 可以進行干預
      props: ['classList', 'id'],
      id: `selected_type_${targetClass_buntValue}`,
      events: ['click'],
      classList: ['bunt', 'selected', 'display_select_type'],
      click: a,
      attribute: ['value'],
      value: targetClass_buntValue,
      a_a: {
        tag: 'p',
        props: ['innerHTML'],
        innerHTML: targetElPInnerHTML,
      },
    },
  };

  //記錄新元素 1 / 2
  // // 置空 元素 添加到头部	-- 2 / 3
  selectedTypeArr[targetClass_buntValue] = domTree(appendEl, domData);

  // //置空 元素 添加到头部	-- 3 / 3
  // appendEl.innerHTML += appendElInnerHTML

  endsTimeAnimation(
    document.getElementById(`selected_type_${targetClass_buntValue}`),
    'display_select_type'
  );

  console.log(selectedTypeArr[targetClass_buntValue]);
  return selectedTypeArr[targetClass_buntValue];
}

function getSelectedTypeArr() {
  return selectedTypeArr;
}

function a() {
  console.log('fileType.js');
}
export { selectTypeAnima, getSelectedTypeArr };
